<template>
 <h1>一个人的信息</h1>
 <h1>姓名: {{ person.name }}</h1>
 <h1>年龄: {{ person.age }}</h1>
 <h1>职业: {{ person.job.type }}</h1>
 <h1>薪水: {{ person.job.salary }}</h1>
 <h1>测试的数据: {{ person.job.a.b.c }}</h1>
 <h1>爱好: {{ person.hobbies }}</h1>
 <h1>num值: {{ test.num }}</h1>

<button @click="changeInfo">修改人的信息</button>
<button @click="changeNum">修改num</button>
</template>

<script>
import { reactive } from 'vue' // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: 'App',
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30K',
        a: {
          b: {
            c: 666
          }
        }
      },
      hobbies: ['抽烟', '喝酒', '玩游戏1']
    })

    let test = reactive({
      num: 123
    })
    
    // 方法
    function changeInfo() {
      person.name = '李四'
      person.age = 48
      person.job.type = '后端工程师'
      person.job.salary = '20K'
      person.job.a.b.c = 999
      person.hobbies[0] = '打飞机'
    }

    function changeNum() {
      // 直接改变test下面的num，reactive的值会跟着改变，视图会更新
      // test.num = 456
      console.log('test==', test) // Proxy(Object){num: 123}

      // 直接改变原始数据test的值,reactive的值会跟着改变，视图不会更新
      test = {
        num: 456
      }
      console.log('test==', test) // {num: 456}
    }

    // 返回一个对象(常用)
    return {
      person: person,
      changeInfo: changeInfo,
      test,
      changeNum
    }
  }
}
</script>
